<!-- 告警中心 -->

<template>
  <div class="AlarmLeft">
    <div class="title">
      <div class="name">
        <img src="../../../assets/img/alarm/alarm-icon.png" alt="" />
        <span>告警列表</span>
      </div>
      <div class="more" @click="toMore">更多...</div>
    </div>
    <div class="list">
      <ul>
        <li v-for="(item, i) in handlerList.slice(0, 6)" :key="i" @click="openModel(item, '告警详情', 'alarmDetail')">
          <div class="AlarmLeft-left">
            <img
              v-if="item.messageAlarmFileDto.length && item.messageAlarmFileDto[0].fileUrl"
              :src="CORE.image(item.messageAlarmFileDto[0].fileUrl)"
            />
            <img v-else src="@screen/assets/img/no-image.png" alt="" />
          </div>
          <div class="AlarmLeft-right">
            <div class="name">{{ item.alarmItemName }}</div>
            <div>时间：{{ formatterTime('alarmTime', item) }}</div>
            <div>地点：{{ item.areaName }}</div>
            <div>
              等级：
              <span v-if="item.alarmLevelId === 1" style="color: #56f6ff">一般</span>
              <span v-else-if="item.alarmLevelId === 2" style="color: #ff594d">重要</span>
              <span v-else-if="item.alarmLevelId === 3" style="color: #ffe671">紧急</span>
              <span v-else>-</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <!-- 详情弹窗 -->
    <Detail ref="alarmDetail" @refreshDataList="getList" />
  </div>
</template>
<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'
import index from './mixIndex'
// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'Left',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixLoop(), index],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 状态数据 (函数返回对象)
   */
  data() {
    return {
      loop: true, // 循环开关
      LOOP_PERIOD: 600, // 循环周期 (单位秒，默认 10 分钟)
    }
  },

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 循环事件 (可覆盖)
     */
    toLoop() {
      //
    },
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
